<template>
  <div class="app-container">
    <!-- 公共顶部 -->
    <large-screen-header />
    <div class="app-main">
      <!-- 大屏首页左侧 -->
      <div class="ls-left">
        <!-- <img src="@/assets/images/index/left.png" alt="" class="ls-left-img" /> -->
        <!-- 全国风险区划(全国地震灾害风险评估与区划)首页 -->
        <router-link class="router-item risk-zonation" :to="'/riskZonation'" />
        <!-- 地震地质灾害评估首页 -->
        <router-link class="router-item geological-disaster" :to="'/geologicalDisaster'" />
        <!-- 安保首页 -->
        <router-link class="router-item security-activity" :to="'/securityActivity'" />
        <!-- 全国承灾体地震易损性分析 -->
        <router-link class="router-item vulnerability" :to="'/vulnerability'" />
        <!-- 全国地震区划与抗震设防管理(全国地震安全性评价和钻孔位置分布图)首页 -->
        <router-link class="router-item project-drill" :to="'/projectDrill'" />
        <!-- 全国地震活动断层探查管理(活动断层分布)首页 -->
        <router-link class="router-item active-fault" :to="'/activeFault'" />
      </div>
      <!-- 大屏首页中心 -->
      <div class="ls-center">
        <!-- 统计数 -->
        <ul class="ls-total">
          <li class="ls-total-item">
            <span class="ls-total-title">平台注册量</span>
            <span class="ls-total-num">{{ homeBase.registeredNum }}</span>
          </li>
          <li class="ls-total-item">
            <span class="ls-total-title">IP数</span>
            <span class="ls-total-num">{{ homeBase.ipNum }}</span>
          </li>
          <li class="ls-total-item">
            <span class="ls-total-title">当日访客数</span>
            <span class="ls-total-num">{{ homeBase.callerNum }}</span>
          </li>
          <li class="ls-total-item">
            <span class="ls-total-title">当日浏览量</span>
            <span class="ls-total-num">{{ homeBase.pvNum }}</span>
          </li>
        </ul>
        <!-- 地图 -->
        <div class="ls-map">
          <IndexMap></IndexMap>
        </div>
        <!-- 区域信息 -->
        <ul class="ls-area">
          <li class="ls-area-item" v-for="(item, index) in homeSysProvinces" :key="index">
            <span class="ls-area-title">{{ item.province }}</span>
            <span class="ls-area-num">{{ item.num }}</span>
          </li>
        </ul>
      </div>
      <!-- 大屏首页右侧 -->
      <div class="ls-right">
        <!-- <img src="@/assets/images/index/right.png" alt="" class="ls-right-img" /> -->
        <!-- 预评估首页 -->
        <router-link class="router-item disaster-losses" :to="'/disasterLosses'" />
        <!-- 地震灾害现场调查与损失评估 -->
        <router-link class="router-item loss-assessment" :to="'/lossAssessment'" />
        <!-- 全国房屋设施数据首页 -->
        <router-link class="router-item housing-facilities" :to="'/housingFacilities'" />
        <!-- 房屋加固改造信息服务首页 -->
        <router-link class="router-item build-house" :to="'/buildHouse'" />
        <!-- 基础数据 -->
        <router-link class="router-item basic-data" :to="'/basicData'" />
      </div>
    </div>
  </div>
</template>
<script setup name="Index">
//地图
import IndexMap from '@/views/largeScreenIndex/map/index.vue';
import { getHome } from '@/api/index.js';
const homeBase = ref({});
const homeSysProvinces = ref([]);

getData();
function getData() {
  getHome().then((res) => {
    homeBase.value = res.data.homeBase;
    homeSysProvinces.value = res.data.homeSysProvinces;
  });
}
</script>

<style scoped lang="scss">
.app-container {
  background-image: url('../../assets/images/index/bg.jpg') !important;
  background-size: cover;

  .app-main {
    display: flex;
    justify-content: space-between;

    // min-height: 4rem;
    .ls-center {
      width: 923px;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      position: relative;

      .ls-total {
        display: flex;
        justify-content: space-around;
        position: absolute;
        top: 0;
        left: -55px;
        z-index: 10;

        &-item {
          width: 218px;
          height: 112px;
          box-sizing: border-box;
          background-size: 100% 100%;
          background-image: url('../../assets/images/index/tab.png') !important;
          text-align: center;
          padding-top: 24px;
          margin: 0 10px;

          span {
            display: block;
          }
        }

        &-title {
          height: 24px;
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #ffffff;
          line-height: 32px;
        }

        &-num {
          font-size: 40px;
          font-family: DS-Digital;
          font-weight: 600;
          color: #00fff0;
        }
      }

      .ls-map {
        height: 680px;
        overflow: hidden; //test
        // position: relative;
        // margin-top: 112px;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        width: 100%;
      }

      .ls-area {
        display: flex;
        justify-content: space-around;
        position: absolute;
        bottom: 0;
        left: -30px;

        &-item {
          width: 207px;
          height: 177px;
          box-sizing: border-box;
          background-size: 100% 100%;
          background-image: url('../../assets/images/index/area.png') !important;
          text-align: center;
          padding-top: 36px;
          margin: 0 -15px;

          span {
            display: block;
          }
        }

        &-title {
          height: 34px;
          font-size: 24px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #00fff0;
        }

        &-num {
          font-size: 32px;
          font-family: DS-Digital;
          font-weight: bold;
          color: #fff700;
          background: linear-gradient(135deg,
              #ffd800 0%,
              #fffca9 30.37109375%,
              #fffed5 51.5380859375%,
              #fffca9 72.1923828125%,
              #ffd800 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .ls-left {
      margin: 0 0 0 50px;
      position: relative;
      background: url('@/assets/images/index/left.png') no-repeat;
      background-size: contain;
      background-position: center left;
      width: 440px;
      height: calc(100% - 20px);

      // .ls-left-img {
      //   width: 440px;
      //   height: calc(100% - 20px);
      // }

      .router-item {
        position: absolute;
        width: 220px;
        height: 100px;
      }

      .geological-disaster {
        top: 18%;
        left: 65px;
      }
    }

    .ls-right {
      margin-right: 50px;
      position: relative;
      background: url('@/assets/images/index/right.png') no-repeat;
      background-size: contain;
      background-position: center right;
      width: 400px;
      height: calc(100% - 20px);

      // .ls-right-img {
      //   width: 440px;
      //   height: calc(100% - 20px);
      // }

      .router-item {
        position: absolute;
        width: 220px;
        height: 100px;
      }

      .disaster-losses {
        top: 4%;
        right: 100px;
      }
    }

    .security-activity {
      top: 32%;
      left: 52px;
    }

    .loss-assessment {
      top: 18%;
      right: 60px;
      width: 230px !important;
    }

    .housing-facilities {
      right: 40px;
      bottom: 42%;
      width: 230px !important;
    }

    .project-drill {
      width: 230px !important;
      bottom: 28%;
      left: 50px;
    }

    .risk-zonation {
      top: 4%;
      left: 90px;
      width: 240px !important;
    }

    .active-fault {
      bottom: 13%;
      left: 80px;
    }

    .build-house {
      bottom: 27%;
      right: 52px;
    }

    .basic-data {
      right: 78px;
      bottom: 13%;
    }

    .vulnerability {
      left: 50px;
      top: 47%;
      width: 220px !important;
    }
  }
}</style>
